<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script
      crossorigin
      src="https://unpkg.com/react@17.0.2/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
    ></script>
    <!-- 引入babel, 让babel帮我们编译jsx -->
    <script src="./babel.min.js"></script>
    <!-- script标签添加type=text/babel 相当于告诉babel,这个script标签的内容需要编译 -->
    <script type="text/babel">
      //需求: 根据数据,动态创建一个div,渲染到页面上
      let obj = {
        name: 'hj',
        age: 43,
        info: 'lsp',
      }
      let a = 1
      const b = 2
      const style = 'box'

      //   1. 利用jsx(javascript xml),理解为: 在js中写标签

      // jsx中有一个插值表达式 {}
      // 学习插值表达式的两个问题:
      // 1. 插值表达式可以写什么 可以写任何的js表达式(一段代码运行之后会得到一个结果,就是js表达式),语句不支持
      // 表达式:
      // 变量
      // 常量
      // 字面量 1, 'abc', true, [1,2,3] {name: 'zs'} function(){}
      // 运算
      // 2. 插值表达式可以写在哪里
      // 2.1 标签的子节点 为了渲染数据
      // 2.2 标签的属性的值的位置, 控制属性的值
      const div = (
        <div id="box">
          <h1>{obj.name}</h1>
          <p>{obj.age}</p>
          <h1>{obj.info}</h1>
          <div>{a}</div>
          <div>{b}</div>
          <div>{'abc'}</div>
          {/* jsx的注释*/}
          {/* 布尔值绝对是表达式,但是渲染布尔值没有任何意义,所以react不会渲染 */}
          <div>{true}</div>
          {/* 插值表达式中,如果插入的是一个数组,则数组中的每一项都是当前父元素的子节点 */}
          {/*<div>{[1, 2, 3]}</div>*/}
          <div>{'123'}</div>
          {/* 注意: react插值表达式中, 是绝对可以传入对象的,但是不要去渲染普通对象. 因为没有任何意义.那么react就把普通对象归为非react元素这一类,则会直接报错*/}
          {/*<div>{{ name: 'zs' }}</div>*/}
          <div>{<h1>test</h1>}</div>
          {/*注意: 函数没有渲染的意义,所以不渲染,然后警告*/}
          <div>{function () {}}</div>
          <div>{1 + 1}</div>
          <div>{true ? 'haha' : 'hehe'}</div>
          <div>{'嘻嘻' && '嘿嘿'}</div>
          <div>{'嘻嘻' || '嘿嘿'}</div>
          <button disabled={false}>按钮</button>
          <input type="checkbox" checked={false} />
          <div style={{ color: 'red', backgroundColor: 'pink', width: 100 }}>
            123
          </div>
          <div className={style}></div>
          <label htmlFor="app"></label>
        </div>
      )

      const wrap = (
        <div>
          <h1>123</h1> <h2></h2>
        </div>
      )

      //   2. 根据虚拟dom创建真实dom,渲染页面

      //   ReactDOM.render(要被渲染的虚拟dom, 真实DOM树的某个节点)
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
